<template>
  <div>
    <nav-bar class="nav-bar">
      <div slot="center">购物车({{ cartLength }})</div>
    </nav-bar>

    <Scroll class="content">
      <div id="shop-item">
        <div class="item-selector">
          <check-button
            :is-checked="cartList[0].checked"
            @click.native="checkedChange"
          ></check-button>
        </div>
        <div class="item-img">
          <img :src="showImage" alt="商品图片" />
        </div>
        <div class="item-info">
          <div class="item-title">{{ cartList[0].title }}</div>
          <div class="item-desc">商品描述: {{ cartList[0].desc }}</div>
          <div class="info-bottom">
            <div class="item-price left">¥{{ cartList[0].price }}</div>
            <div class="item-count right">x{{ cartList[0].count }}</div>
          </div>
        </div>
      </div>
    </Scroll>

    <div class="cart-bottom-bar">
      <CheckButton
        class="ch"
        :is-checked="isSelectAll"
        @click.native="checkedChange"
      ></CheckButton
      ><span>全选</span>
      <div class="total">
        合计：<span class="sum">{{ totalPrice }}</span>
      </div>

      <div class="calculate" ><!-- @click="settlement" -->
        去结算(<span class="result">{{ checkLength }}</span
        >)
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navBar/NavBar";
import Scroll from "components/common/scroll/Scroll.vue";

import CheckButton from "components/common/checkButton/CheckButton";

import { mapGetters } from "vuex";

export default {
  name: "ShopCar",
  components: {
    NavBar,
    Scroll,
    CheckButton,
  },
  computed: {
    ...mapGetters(["cartLength", "cartList"]),
    showImage() {
      return "http:" + this.cartList[0].image;
    },
    totalPrice() {
      return (
        "￥" +
        this.$store.state.cartList
          .filter((item) => item.checked)
          .reduce((preValue, item) => {
            return item.price * item.count;
          }, 0)
      );
    },
    checkLength() {
      return this.$store.state.cartList.filter((item) => item.checked).length;
    },
    isSelectAll() {
      // if(this.$store.state.cartList.length === 0) return false
      return !this.$store.state.cartList.filter((item) => !item.checked).length;
    },
  },
  methods: {
    checkedChange() {
      this.cartList[0].checked = !this.cartList[0].checked;
    },
    /* settlement() {
      
      if (this.$store.state.cartList.length == 0) {
        alert("请至少选择一件商品");
        console.log("kkk");
      }
    }, */
  },
};
</script>

<style scoped>
.result {
  color: Cyan;
}

.calculate {
  position: absolute;
  right: 0;
  width: 100px;
  height: 100%;
  color: #fff;
  line-height: 40px;
  text-align: center;
  background-color: red;
}

.total {
  padding-left: 40px;
}

.total .sum {
  color: red;
  font-size: 20px;
}

.cart-bottom-bar {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 49px;
  width: 100%;
  height: 40px;
  align-items: center;
  background-color: #eee;
}

.cart-bottom-bar span {
  font-size: 15px;
  padding: 0 5px;
}

.ch {
  padding-left: 10px;
}

.nav-bar {
  color: #fff;
  font-weight: 700;
  background-color: var(--color-tint);
}

.content {
  height: 100vh;
}

#shop-item {
  width: 100%;
  display: flex;
  font-size: 0;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.item-selector {
  width: 14%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-title,
.item-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-img {
  padding: 5px;
  /*border: 1px solid #ccc;*/
}

.item-img img {
  width: 80px;
  height: 100px;
  display: block;
  border-radius: 5px;
}

.item-info {
  font-size: 17px;
  color: #333;
  padding: 5px 10px;
  position: relative;
  overflow: hidden;
}

.item-info .item-desc {
  font-size: 14px;
  color: #666;
  margin-top: 15px;
}

.info-bottom {
  margin-top: 10px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.info-bottom .item-price {
  color: orangered;
}
</style>